<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车 - 图书购物车系统</title>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--    <link rel="stylesheet" href="./js/index.css">-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
        <script src="./js/vue.min.js"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
        <script src="./js/axios.min.js"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
        <script src="./js/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: linear-gradient(135deg, #1e5799 0%,#207cca 51%,#2989d8 100%);
            color: white;
            padding: 20px 0;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .bookinfo{
            margin-top:50px;
        }
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .logo i {
            margin-right: 10px;
            font-size: 28px;
        }
        .nav {
            display: flex;
        }
        .nav-item {
            margin-left: 30px;
            cursor: pointer;
            font-size: 16px;
            transition: color 0.3s;
            padding: 5px 10px;
            border-radius: 4px;
            position: relative;
        }
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .page-title {
            font-size: 24px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ebeef5;
            color: #1e5799;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .batch-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .back-button {
            margin-top: 30px;
            text-align: center;
        }
        .footer {
            text-align: center;
            padding: 30px 0;
            color: #909399;
            font-size: 14px;
            margin-top: 50px;
            border-top: 1px solid #ebeef5;
        }
        .empty {
            text-align: center;
            padding: 50px 0;
            font-size: 16px;
            color: #909399;
        }
        .empty i {
            font-size: 50px;
            color: #c0c4cc;
            margin-bottom: 20px;
        }
        .cart-container {
            background: white;
            border-radius: 6px;
            padding: 30px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .cart-header {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ebeef5;
            margin-bottom: 15px;
        }
        .cart-item {
            display: flex;
            padding: 20px 0;
            border-bottom: 1px solid #ebeef5;
            transition: all 0.3s;
            align-items: center;
        }
        .cart-item-removing {
            opacity: 0.5;
            background-color: #f9f9f9;
        }
        .cart-item-selector {
            width: 50px;
            display: flex;
            justify-content: center;
        }
        .cart-item-image {
            width: 100px;
            height: 150px;
            background-color: #f5f7fa;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            border-radius: 4px;
            overflow: hidden;
        }
        .cart-item-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }
        .cart-item-info {
            flex-grow: 1;
            min-width: 250px;
        }
        .cart-item-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #303133;
        }
        .cart-item-price {
            color: #e74c3c;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            width: 100px;
            text-align: center;
        }
        .cart-item-meta {
            color: #909399;
            font-size: 14px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 150px;
            justify-content: center;
        }
        .quantity-input {
            width: 100px;
        }
        .cart-item-actions {
            display: flex;
            align-items: center;
            margin-top: 10px;
            gap: 10px;
            width: 120px;
            justify-content: center;
        }
        .cart-item-subtotal {
            width: 120px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #e74c3c;
        }
        .cart-summary {
            margin-top: 30px;
            padding: 20px;
            background-color: #f5f7fa;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cart-total {
            font-size: 18px;
            font-weight: bold;
        }
        .total-price {
            color: #e74c3c;
            font-size: 24px;
        }
        .cart-buttons {
            display: flex;
            gap: 15px;
        }
        .updating {
            position: relative;
        }
        .updating::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.7);
            z-index: 1;
        }
        .cart-column {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .cart-column-label {
            color: #909399;
            font-size: 14px;
            margin-bottom: 5px;
            display: none;
        }
        @media (max-width: 768px) {
            .cart-header {
                display: none;
            }
            .cart-item {
                flex-wrap: wrap;
                position: relative;
                padding: 15px;
            }
            .cart-item-selector {
                position: absolute;
                top: 15px;
                left: 15px;
            }
            .cart-item-image {
                width: 100%;
                height: 200px;
                margin-right: 0;
                margin-bottom: 15px;
            }
            .cart-item-info {
                width: 100%;
                margin-bottom: 15px;
            }
            .cart-column {
                flex: 1;
                margin-bottom: 10px;
            }
            .cart-column-label {
                display: block;
            }
            .cart-item-price,
            .cart-item-quantity,
            .cart-item-subtotal,
            .cart-item-actions {
                width: auto;
                flex: 1;
                text-align: center;
            }
            .cart-item-actions {
                justify-content: center;
            }
            .cart-summary {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }
            .page-title {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            .batch-actions {
                align-self: flex-start;
            }
        }
        .checkout-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        .checkout-loading-content {
            background: white;
            padding: 30px;
            border-radius: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-content">
            <div class="logo">
                <i class="el-icon-reading"></i>
                网上书城
            </div>
            <div class="nav">
                <a href="bookList.html" class="nav-item">图书列表</a>
                <a href="myCar1.html" class="nav-item">
                    购物车
                    <span v-if="cartCount > 0" class="cart-count">{{ cartCount }}</span>
                </a>
            </div>

            <div class="header-info" v-if="curUser==null">
                <a href="AiLogin.html">登录</a>
                <a href="register.html">注册</a>
            </div>
            <div class="header-info" v-else>
                <span style="color:yellow">欢迎您:</span><label style="font-weight: bold;font-size: 18px">{{curUser.userName}}</label>
                <el-link type="danger" @click="exit">退出</el-link>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="back-button">
            <el-button type="primary" icon="el-icon-arrow-left" @click="goToList">返回列表</el-button>
        </div>

        <h1 class="page-title">
            <span>我的购物车</span>
            <div v-if="cartItems.length > 0" class="batch-actions">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="batchDelete"
                        :disabled="selectedItems.length === 0 || isBatchDeleting"
                        :loading="isBatchDeleting">
                    {{ isBatchDeleting ? '批量删除中...' : '批量删除' }}
                </el-button>
                <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
            </div>
        </h1>

        <div v-if="cartItems.length > 0" class="cart-container">
            <div class="cart-header">
                <div style="width: 50px;"></div>
                <div style="flex: 4;">商品信息</div>
                <div style="flex: 1; text-align: center;">单价</div>
                <div style="flex: 1; text-align: center;">数量</div>
                <div style="flex: 1; text-align: center;">小计</div>
                <div style="flex: 1; text-align: center;">操作</div>
            </div>

            <div v-for="item in cartItems" :key="item.carId" class="cart-item" :class="{'cart-item-removing': removingItemId === item.carId || updatingItemId === item.carId}">
                <div class="cart-item-selector">
                    <el-checkbox v-model="item.selected" @change="updateSelectAll"></el-checkbox>
                </div>
                <div class="cart-item-info">
                    <div class="cart-item-image" style="float: left">
                        <img :src="getBookImage(item.bookImage)" alt="图书封面">
                    </div>
                    <div class="bookinfo">
                        <div class="cart-item-title">{{ item.bookName }}</div>
                        <div class="cart-item-meta">
                            <div>ID: {{ item.bookId }}</div>
                            <div>添加时间: {{ formatDate(item.createTime) || '未知' }}</div>
                        </div>
                    </div>
                </div>
                <div class="cart-column">
                    <div class="cart-column-label">单价</div>
                    <div class="cart-item-price">¥{{ item.bookPrice.toFixed(2) }}</div>
                </div>
                <div class="cart-column">
                    <div class="cart-column-label">数量</div>
                    <div class="cart-item-quantity">
                        <el-input-number
                                v-model="item.carCount"
                                :min="1"
                                :max="100"
                                size="small"
                                @change="updateItemQuantity(item)"
                                :disabled="updatingItemId === item.carId"
                                class="quantity-input"
                        ></el-input-number>
                    </div>
                </div>
                <div class="cart-column">
                    <div class="cart-column-label">小计</div>
                    <div class="cart-item-subtotal">¥{{ (item.bookPrice * item.carCount).toFixed(2) }}</div>
                </div>
                <div class="cart-column">
                    <div class="cart-column-label">操作</div>
                    <div class="cart-item-actions">
                        <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="small"
                                @click="removeCartItem(item.carId)"
                                :disabled="removingItemId === item.carId || updatingItemId === item.carId"
                                :loading="removingItemId === item.carId">
                            {{ removingItemId === item.carId ? '删除中...' : '删除' }}
                        </el-button>
                    </div>
                </div>
            </div>

            <div class="cart-summary">
                <div class="cart-total">
                    已选 <span class="total-price">{{ selectedItems.length }}</span> 件商品
                    总计: <span class="total-price">¥{{ totalCartPrice.toFixed(2) }}</span>
                </div>
                <div class="cart-buttons">
                    <el-button type="info" @click="goToList">继续购物</el-button>
                    <el-button type="success" @click="checkout">结算订单</el-button>
                </div>
            </div>
        </div>

        <div v-else class="empty">
            <i class="el-icon-shopping-cart-2"></i>
            <p>购物车空空如也</p>
            <el-button type="primary" @click="goToList" style="margin-top: 20px;">去挑选图书</el-button>
        </div>
    </div>

    <div class="footer">
        © 2025 网上书城 | 前端使用Vue2+ElementUI+Axios实现
    </div>

    <!-- 结算加载状态 -->
    <div v-if="isCheckoutLoading" class="checkout-loading">
        <div class="checkout-loading-content">
            <i class="el-icon-loading" style="font-size: 40px; margin-bottom: 20px;"></i>
            <p style="font-size: 18px;">正在跳转到订单页面，请稍候...</p>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                cartItems: [],
                cartCount: 0,
                books: [],
                removingItemId: null, // 当前正在删除的商品ID
                updatingItemId: null, // 当前正在更新的商品ID
                selectAll: false,      // 全选状态
                isBatchDeleting: false, // 批量删除状态
                curUser: null,         // 当前登录者对象
                isCheckoutLoading: false // 结算加载状态
            };
        },
        computed: {
            // 计算总价
            totalCartPrice() {
                return this.cartItems.reduce((total, item) => {
                    // 仅计算选中的商品
                    if (item.selected) {
                        return total + (item.bookPrice * item.carCount);
                    }
                    return total;
                }, 0);
            },

            // 获取选中的商品
            selectedItems() {
                return this.cartItems.filter(item => item.selected);
            },

            // 获取选中的商品ID
            selectedItemIds() {
                return this.selectedItems.map(item => item.carId);
            }
        },
        mounted() {
            this.fetchCartItems();
            this.fetchBooks();
            this.getCurUser();
        },
        created() {
            // 登录检查
            const userInfo = sessionStorage.getItem('curUser');
            if (!userInfo) {
                alert('请先登录！');
                window.location.href = '/AiLogin.html';
            }
        },
        methods: {
            /**
             * 用户退出
             */
            exit(){
                axios
                    .delete('/user/exit')
                    .then(response => {
                        let result = response.data;
                        if(result.success){
                            //清除sessionStorage中存储的用户信息
                            window.sessionStorage.removeItem("curUser");
                            //设置curUser属性的值为null
                            this.curUser = null;
                            this.$message.success({
                                message:result.message,
                                duration:1500
                            });
                            window.location.href="/AiLogin.html"
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //获得当前登录的用户信息
            getCurUser(){
                //从sessionStorage获得当前登录的用户
                this.curUser =JSON.parse(window.sessionStorage.getItem("curUser"));
            },
            fetchCartItems() {
                const userId = "93";
                axios.get(`http://localhost:8081/car/getCarByUser/${userId}`)
                    .then(response => {
                        // 初始化选中状态
                        this.cartItems = response.data.map(item => {
                            return {...item, selected: false};
                        });
                        this.cartCount = this.cartItems.reduce((count, item) => count + item.carCount, 0);

                        // 如果已经获取到图书数据，则更新图书信息
                        if (this.books.length > 0) {
                            this.updateBookInfo();
                        }
                    })
                    .catch(error => {
                        console.error('获取购物车数据失败:', error);
                        this.$message.error('获取购物车数据失败');
                    });
            },

            fetchBooks() {
                axios.get('http://localhost:8081/books/queryBooks')
                    .then(response => {
                        this.books = response.data;

                        // 如果已经获取到购物车数据，则更新图书信息
                        if (this.cartItems.length > 0) {
                            this.updateBookInfo();
                        }
                    })
                    .catch(error => {
                        console.error('获取图书列表失败:', error);
                    });
            },

            updateBookInfo() {
                this.cartItems.forEach(item => {
                    const book = this.books.find(b => b.bookId === item.bookId);
                    if (book) {
                        item.bookName = book.bookName;
                        item.bookPrice = book.bookPrice;
                        item.bookImage = book.bookImage;
                    }
                });
            },

            // 更新商品数量
            updateItemQuantity(item) {
                if (!item || !item.carId) return;

                // 设置当前正在更新的商品ID
                this.updatingItemId = item.carId;

                // 调用更新数量接口
                axios.put(`http://localhost:8081/car/updateCarCount/${item.carId}/${item.carCount}`)
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success('数量更新成功');
                            // 更新购物车总数量
                            this.cartCount = this.cartItems.reduce(
                                (count, cartItem) => count + cartItem.carCount, 0
                            );
                        } else {
                            this.$message.error('更新失败: ' + (response.data.message || '未知错误'));
                            // 恢复原始值
                            this.fetchCartItems();
                        }
                    })
                    .catch(error => {
                        console.error('更新商品数量失败:', error);
                        this.$message.error('更新失败: ' + (error.response?.data?.message || '网络错误'));
                        // 恢复原始值
                        this.fetchCartItems();
                    })
                    .finally(() => {
                        // 无论成功或失败，都重置更新状态
                        this.updatingItemId = null;
                    });
            },

            // 删除单个商品
            removeCartItem(carId) {
                this.$confirm('确定要删除该商品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 设置当前正在删除的商品ID
                    this.removingItemId = carId;

                    // 调用后端删除接口
                    axios.delete(`http://localhost:8081/car/deleteCar/${carId}`)
                        .then(response => {
                            if (response.data.success) {
                                // 删除成功，从本地购物车中移除该商品
                                this.cartItems = this.cartItems.filter(item => item.carId !== carId);
                                // 更新购物车数量
                                this.cartCount = this.cartItems.reduce(
                                    (count, item) => count + item.carCount, 0
                                );
                                this.$message.success('已从购物车移除');
                            } else {
                                this.$message.error('删除失败: ' + (response.data.message || '未知错误'));
                            }
                        })
                        .catch(error => {
                            console.error('删除购物车商品失败:', error);
                            this.$message.error('删除失败: ' + (error.response?.data?.message || '网络错误'));
                        })
                        .finally(() => {
                            // 无论成功或失败，都重置删除状态
                            this.removingItemId = null;
                        });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },

            // 批量删除
            batchDelete() {
                if (this.selectedItems.length === 0) {
                    this.$message.warning('请选择要删除的商品');
                    return;
                }

                this.$confirm(`确定要删除选中的 ${this.selectedItems.length} 件商品吗?`, '批量删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 设置批量删除状态
                    this.isBatchDeleting = true;

                    // 获取选中的商品ID
                    const carIds = this.selectedItems.map(item => item.carId).join(',');

                    // 调用批量删除接口
                    axios.delete(`http://localhost:8081/car/delCarBach?carIds=${carIds}`)
                        .then(response => {
                            if (response.data.success) {
                                // 批量删除成功
                                this.cartItems = this.cartItems.filter(
                                    item => !this.selectedItems.includes(item)
                                );
                                // 更新购物车数量
                                this.cartCount = this.cartItems.reduce(
                                    (count, item) => count + item.carCount, 0
                                );
                                this.$message.success(`成功删除 ${this.selectedItems.length} 件商品`);
                                // 重置全选状态
                                this.selectAll = false;
                            } else {
                                this.$message.error('批量删除失败: ' + (response.data.message || '未知错误'));
                            }
                        })
                        .catch(error => {
                            console.error('批量删除失败:', error);
                            this.$message.error('批量删除失败: ' + (error.response?.data?.message || '网络错误'));
                        })
                        .finally(() => {
                            // 重置批量删除状态
                            this.isBatchDeleting = false;
                        });
                }).catch(() => {
                    this.$message.info('已取消批量删除');
                });
            },

            // 全选/取消全选
            toggleSelectAll(checked) {
                this.cartItems.forEach(item => {
                    item.selected = checked;
                });
            },

            // 更新全选状态
            updateSelectAll() {
                this.selectAll = this.cartItems.length > 0 &&
                    this.cartItems.every(item => item.selected);
            },

            // // 结算订单
            // checkout() {
            //     if (this.selectedItems.length === 0) {
            //         this.$message.warning('请选择要结算的商品');
            //         return;
            //     }
            //
            //     // 显示加载状态
            //     this.isCheckoutLoading = true;
            //
            //     // 准备购物车数据
            //     const cartData = this.selectedItems.map(item => ({
            //         id: item.bookId,
            //         title: item.bookName,
            //         author: '作者信息',
            //         price: item.bookPrice,
            //         count: item.carCount,
            //         image: this.getBookImage(item.bookImage),
            //         cartId: item.carId
            //     }));
            //
            //     // 将购物车数据保存到sessionStorage
            //     sessionStorage.setItem('cartItems', JSON.stringify(cartData));
            //
            //     // 模拟跳转延迟
            //     setTimeout(() => {
            //         // 跳转到订单页面
            //         window.location.href = 'OrderPage.html';
            //         this.isCheckoutLoading = false;
            //     }, 1500);
            // },

            // 结算订单
            checkout() {
                if (this.selectedItems.length === 0) {
                    this.$message.warning('请选择要结算的商品');
                    return;
                }

                // 显示加载状态
                this.isCheckoutLoading = true;

                // 准备购物车数据
                const cartData = this.selectedItems.map(item => ({
                    id: item.bookId,
                    title: item.bookName,
                    author: '作者信息',
                    price: item.bookPrice,
                    count: item.carCount,
                    image: this.getBookImage(item.bookImage),
                    cartId: item.carId
                }));

                // 将购物车数据保存到sessionStorage
                sessionStorage.setItem('cartItems', JSON.stringify(cartData));

                // 保存当前用户ID
                sessionStorage.setItem('currentUserId', this.curUser.userId);

                // 模拟跳转延迟
                setTimeout(() => {
                    // 跳转到订单页面
                    window.location.href = 'OrderPage.html';
                    this.isCheckoutLoading = false;
                }, 1500);
            },

            goToList() {
                window.location.href = 'bookList.html';
            },

            getBookImage(imageName) {
                return imageName ? `images/books/${imageName}` : 'https://via.placeholder.com/200x280?text=No+Image';
            },

            formatDate(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            }
        }
    });
</script>
</body>
</html>



<!--
下边是我原来的前端代码
-->
<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>我的购物车 - 图书购物车系统</title>-->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--&lt;!&ndash;    <link rel="stylesheet" href="./js/index.css">&ndash;&gt;-->
<!--&lt;!&ndash;    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>&ndash;&gt;-->
<!--    <script src="./js/vue.min.js"></script>-->
<!--&lt;!&ndash;    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>&ndash;&gt;-->
<!--    <script src="./js/axios.min.js"></script>-->
<!--&lt;!&ndash;    <script src="https://unpkg.com/element-ui/lib/index.js"></script>&ndash;&gt;-->
<!--    <script src="./js/index.js"></script>-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--        }-->
<!--        body {-->
<!--            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;-->
<!--            background-color: #f5f7fa;-->
<!--            color: #333;-->
<!--        }-->
<!--        .container {-->
<!--            max-width: 1200px;-->
<!--            margin: 0 auto;-->
<!--            padding: 20px;-->
<!--        }-->
<!--        .header {-->
<!--            background: linear-gradient(135deg, #1e5799 0%,#207cca 51%,#2989d8 100%);-->
<!--            color: white;-->
<!--            padding: 20px 0;-->
<!--            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--            position: sticky;-->
<!--            top: 0;-->
<!--            z-index: 1000;-->
<!--        }-->
<!--        .bookinfo{-->
<!--            margin-top:50px;-->
<!--        }-->
<!--        .header-content {-->
<!--            max-width: 1200px;-->
<!--            margin: 0 auto;-->
<!--            padding: 0 20px;-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--        }-->
<!--        .logo {-->
<!--            font-size: 24px;-->
<!--            font-weight: bold;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--        }-->
<!--        .logo i {-->
<!--            margin-right: 10px;-->
<!--            font-size: 28px;-->
<!--        }-->
<!--        .nav {-->
<!--            display: flex;-->
<!--        }-->
<!--        .nav-item {-->
<!--            margin-left: 30px;-->
<!--            cursor: pointer;-->
<!--            font-size: 16px;-->
<!--            transition: color 0.3s;-->
<!--            padding: 5px 10px;-->
<!--            border-radius: 4px;-->
<!--            position: relative;-->
<!--        }-->
<!--        .nav-item:hover {-->
<!--            background-color: rgba(255, 255, 255, 0.1);-->
<!--        }-->
<!--        .cart-count {-->
<!--            position: absolute;-->
<!--            top: -8px;-->
<!--            right: -8px;-->
<!--            background-color: #e74c3c;-->
<!--            color: white;-->
<!--            border-radius: 50%;-->
<!--            width: 20px;-->
<!--            height: 20px;-->
<!--            font-size: 12px;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--        }-->
<!--        .page-title {-->
<!--            font-size: 24px;-->
<!--            margin-bottom: 20px;-->
<!--            padding-bottom: 15px;-->
<!--            border-bottom: 1px solid #ebeef5;-->
<!--            color: #1e5799;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: space-between;-->
<!--        }-->
<!--        .batch-actions {-->
<!--            display: flex;-->
<!--            gap: 10px;-->
<!--            align-items: center;-->
<!--        }-->
<!--        .back-button {-->
<!--            margin-top: 30px;-->
<!--            text-align: center;-->
<!--        }-->
<!--        .footer {-->
<!--            text-align: center;-->
<!--            padding: 30px 0;-->
<!--            color: #909399;-->
<!--            font-size: 14px;-->
<!--            margin-top: 50px;-->
<!--            border-top: 1px solid #ebeef5;-->
<!--        }-->
<!--        .empty {-->
<!--            text-align: center;-->
<!--            padding: 50px 0;-->
<!--            font-size: 16px;-->
<!--            color: #909399;-->
<!--        }-->
<!--        .empty i {-->
<!--            font-size: 50px;-->
<!--            color: #c0c4cc;-->
<!--            margin-bottom: 20px;-->
<!--        }-->
<!--        .cart-container {-->
<!--            background: white;-->
<!--            border-radius: 6px;-->
<!--            padding: 30px;-->
<!--            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--        }-->
<!--        .cart-header {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            padding: 10px 0;-->
<!--            border-bottom: 1px solid #ebeef5;-->
<!--            margin-bottom: 15px;-->
<!--        }-->
<!--        .cart-item {-->
<!--            display: flex;-->
<!--            padding: 20px 0;-->
<!--            border-bottom: 1px solid #ebeef5;-->
<!--            transition: all 0.3s;-->
<!--            align-items: center;-->
<!--        }-->
<!--        .cart-item-removing {-->
<!--            opacity: 0.5;-->
<!--            background-color: #f9f9f9;-->
<!--        }-->
<!--        .cart-item-selector {-->
<!--            width: 50px;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--        }-->
<!--        .cart-item-image {-->
<!--            width: 100px;-->
<!--            height: 150px;-->
<!--            background-color: #f5f7fa;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            margin-right: 20px;-->
<!--            border-radius: 4px;-->
<!--            overflow: hidden;-->
<!--        }-->
<!--        .cart-item-image img {-->
<!--            max-width: 100%;-->
<!--            max-height: 100%;-->
<!--            object-fit: cover;-->
<!--        }-->
<!--        .cart-item-info {-->
<!--            flex-grow: 1;-->
<!--            min-width: 250px;-->
<!--        }-->
<!--        .cart-item-title {-->
<!--            font-size: 18px;-->
<!--            font-weight: bold;-->
<!--            margin-bottom: 10px;-->
<!--            color: #303133;-->
<!--        }-->
<!--        .cart-item-price {-->
<!--            color: #e74c3c;-->
<!--            font-size: 18px;-->
<!--            font-weight: bold;-->
<!--            margin-bottom: 10px;-->
<!--            width: 100px;-->
<!--            text-align: center;-->
<!--        }-->
<!--        .cart-item-meta {-->
<!--            color: #909399;-->
<!--            font-size: 14px;-->
<!--            margin-bottom: 10px;-->
<!--            display: flex;-->
<!--            flex-wrap: wrap;-->
<!--            gap: 15px;-->
<!--        }-->
<!--        .cart-item-quantity {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 10px;-->
<!--            width: 150px;-->
<!--            justify-content: center;-->
<!--        }-->
<!--        .quantity-input {-->
<!--            width: 100px;-->
<!--        }-->
<!--        .cart-item-actions {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            margin-top: 10px;-->
<!--            gap: 10px;-->
<!--            width: 120px;-->
<!--            justify-content: center;-->
<!--        }-->
<!--        .cart-item-subtotal {-->
<!--            width: 120px;-->
<!--            text-align: center;-->
<!--            font-size: 18px;-->
<!--            font-weight: bold;-->
<!--            color: #e74c3c;-->
<!--        }-->
<!--        .cart-summary {-->
<!--            margin-top: 30px;-->
<!--            padding: 20px;-->
<!--            background-color: #f5f7fa;-->
<!--            border-radius: 6px;-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--        }-->
<!--        .cart-total {-->
<!--            font-size: 18px;-->
<!--            font-weight: bold;-->
<!--        }-->
<!--        .total-price {-->
<!--            color: #e74c3c;-->
<!--            font-size: 24px;-->
<!--        }-->
<!--        .cart-buttons {-->
<!--            display: flex;-->
<!--            gap: 15px;-->
<!--        }-->
<!--        .updating {-->
<!--            position: relative;-->
<!--        }-->
<!--        .updating::after {-->
<!--            content: '';-->
<!--            position: absolute;-->
<!--            top: 0;-->
<!--            left: 0;-->
<!--            right: 0;-->
<!--            bottom: 0;-->
<!--            background: rgba(255, 255, 255, 0.7);-->
<!--            z-index: 1;-->
<!--        }-->
<!--        .cart-column {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            flex-direction: column;-->
<!--        }-->
<!--        .cart-column-label {-->
<!--            color: #909399;-->
<!--            font-size: 14px;-->
<!--            margin-bottom: 5px;-->
<!--            display: none;-->
<!--        }-->
<!--        @media (max-width: 768px) {-->
<!--            .cart-header {-->
<!--                display: none;-->
<!--            }-->
<!--            .cart-item {-->
<!--                flex-wrap: wrap;-->
<!--                position: relative;-->
<!--                padding: 15px;-->
<!--            }-->
<!--            .cart-item-selector {-->
<!--                position: absolute;-->
<!--                top: 15px;-->
<!--                left: 15px;-->
<!--            }-->
<!--            .cart-item-image {-->
<!--                width: 100%;-->
<!--                height: 200px;-->
<!--                margin-right: 0;-->
<!--                margin-bottom: 15px;-->
<!--            }-->
<!--            .cart-item-info {-->
<!--                width: 100%;-->
<!--                margin-bottom: 15px;-->
<!--            }-->
<!--            .cart-column {-->
<!--                flex: 1;-->
<!--                margin-bottom: 10px;-->
<!--            }-->
<!--            .cart-column-label {-->
<!--                display: block;-->
<!--            }-->
<!--            .cart-item-price,-->
<!--            .cart-item-quantity,-->
<!--            .cart-item-subtotal,-->
<!--            .cart-item-actions {-->
<!--                width: auto;-->
<!--                flex: 1;-->
<!--                text-align: center;-->
<!--            }-->
<!--            .cart-item-actions {-->
<!--                justify-content: center;-->
<!--            }-->
<!--            .cart-summary {-->
<!--                flex-direction: column;-->
<!--                gap: 20px;-->
<!--                align-items: flex-start;-->
<!--            }-->
<!--            .page-title {-->
<!--                flex-direction: column;-->
<!--                align-items: flex-start;-->
<!--                gap: 15px;-->
<!--            }-->
<!--            .batch-actions {-->
<!--                align-self: flex-start;-->
<!--            }-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div id="app">-->
<!--    &lt;!&ndash; 顶部导航 &ndash;&gt;-->
<!--    <div class="header">-->
<!--        <div class="header-content">-->
<!--            <div class="logo">-->
<!--                <i class="el-icon-reading"></i>-->
<!--                图书购物车系统-->
<!--            </div>-->
<!--            <div class="nav">-->
<!--                <a href="bookList.html" class="nav-item">图书列表</a>-->
<!--                <a href="myCar1.html" class="nav-item">-->
<!--                    购物车-->
<!--                    <span v-if="cartCount > 0" class="cart-count">{{ cartCount }}</span>-->
<!--                </a>-->
<!--            </div>-->

<!--            <div class="header-info" v-if="curUser==null">-->
<!--                <a href="AiLogin.html">登录</a>-->
<!--                <a href="register.html">注册</a>-->
<!--            </div>-->
<!--            <div class="header-info" v-else>-->
<!--                <span style="color:yellow">欢迎您:</span><label style="font-weight: bold;font-size: 18px">{{curUser.userName}}</label>-->
<!--                <el-link type="danger" @click="exit">退出</el-link>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--    <div class="container">-->
<!--        <div class="back-button">-->
<!--            <el-button type="primary" icon="el-icon-arrow-left" @click="goToList">返回列表</el-button>-->
<!--        </div>-->

<!--        <h1 class="page-title">-->
<!--            <span>我的购物车</span>-->
<!--            <div v-if="cartItems.length > 0" class="batch-actions">-->
<!--                <el-button-->
<!--                        type="danger"-->
<!--                        icon="el-icon-delete"-->
<!--                        @click="batchDelete"-->
<!--                        :disabled="selectedItems.length === 0 || isBatchDeleting"-->
<!--                        :loading="isBatchDeleting">-->
<!--                    {{ isBatchDeleting ? '批量删除中...' : '批量删除' }}-->
<!--                </el-button>-->
<!--                <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>-->
<!--            </div>-->
<!--        </h1>-->

<!--        <div v-if="cartItems.length > 0" class="cart-container">-->
<!--            <div class="cart-header">-->
<!--                <div style="width: 50px;"></div>-->
<!--                <div style="flex: 4;">商品信息</div>-->
<!--                <div style="flex: 1; text-align: center;">单价</div>-->
<!--                <div style="flex: 1; text-align: center;">数量</div>-->
<!--                <div style="flex: 1; text-align: center;">小计</div>-->
<!--                <div style="flex: 1; text-align: center;">操作</div>-->
<!--            </div>-->

<!--            <div v-for="item in cartItems" :key="item.carId" class="cart-item" :class="{'cart-item-removing': removingItemId === item.carId || updatingItemId === item.carId}">-->
<!--                <div class="cart-item-selector">-->
<!--                    <el-checkbox v-model="item.selected" @change="updateSelectAll"></el-checkbox>-->
<!--                </div>-->
<!--                <div class="cart-item-info">-->
<!--                    <div class="cart-item-image" style="float: left">-->
<!--                        <img :src="getBookImage(item.bookImage)" alt="图书封面">-->
<!--                    </div>-->
<!--                    <div class="bookinfo">-->
<!--                        <div class="cart-item-title">{{ item.bookName }}</div>-->
<!--                        <div class="cart-item-meta">-->
<!--                            <div>ID: {{ item.bookId }}</div>-->
<!--                            <div>添加时间: {{ formatDate(item.createTime) || '未知' }}</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="cart-column">-->
<!--                    <div class="cart-column-label">单价</div>-->
<!--                    <div class="cart-item-price">¥{{ item.bookPrice.toFixed(2) }}</div>-->
<!--                </div>-->
<!--                <div class="cart-column">-->
<!--                    <div class="cart-column-label">数量</div>-->
<!--                    <div class="cart-item-quantity">-->
<!--                        <el-input-number-->
<!--                                v-model="item.carCount"-->
<!--                                :min="1"-->
<!--                                :max="100"-->
<!--                                size="small"-->
<!--                                @change="updateItemQuantity(item)"-->
<!--                                :disabled="updatingItemId === item.carId"-->
<!--                                class="quantity-input"-->
<!--                        ></el-input-number>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="cart-column">-->
<!--                    <div class="cart-column-label">小计</div>-->
<!--                    <div class="cart-item-subtotal">¥{{ (item.bookPrice * item.carCount).toFixed(2) }}</div>-->
<!--                </div>-->
<!--                <div class="cart-column">-->
<!--                    <div class="cart-column-label">操作</div>-->
<!--                    <div class="cart-item-actions">-->
<!--                        <el-button-->
<!--                                type="danger"-->
<!--                                icon="el-icon-delete"-->
<!--                                size="small"-->
<!--                                @click="removeCartItem(item.carId)"-->
<!--                                :disabled="removingItemId === item.carId || updatingItemId === item.carId"-->
<!--                                :loading="removingItemId === item.carId">-->
<!--                            {{ removingItemId === item.carId ? '删除中...' : '删除' }}-->
<!--                        </el-button>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="cart-summary">-->
<!--                <div class="cart-total">-->
<!--                    已选 <span class="total-price">{{ selectedItems.length }}</span> 件商品-->
<!--                    总计: <span class="total-price">¥{{ totalCartPrice.toFixed(2) }}</span>-->
<!--                </div>-->
<!--                <div class="cart-buttons">-->
<!--                    <el-button type="info" @click="goToList">继续购物</el-button>-->
<!--                    <el-button type="success" @click="checkout">结算订单</el-button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div v-else class="empty">-->
<!--            <i class="el-icon-shopping-cart-2"></i>-->
<!--            <p>购物车空空如也</p>-->
<!--            <el-button type="primary" @click="goToList" style="margin-top: 20px;">去挑选图书</el-button>-->
<!--        </div>-->
<!--    </div>-->

<!--    <div class="footer">-->
<!--        © 2023 图书购物车系统 | 前端使用ElementUI+Axios实现-->
<!--    </div>-->
<!--</div>-->

<!--<script>-->
<!--    new Vue({-->
<!--        el: '#app',-->
<!--        data() {-->
<!--            return {-->
<!--                cartItems: [],-->
<!--                cartCount: 0,-->
<!--                books: [],-->
<!--                removingItemId: null, // 当前正在删除的商品ID-->
<!--                updatingItemId: null, // 当前正在更新的商品ID-->
<!--                selectAll: false,      // 全选状态-->
<!--                isBatchDeleting: false, // 批量删除状态-->
<!--                curUser:null//当前登录者对象-->
<!--            };-->
<!--        },-->
<!--        computed: {-->
<!--            // 计算总价-->
<!--            totalCartPrice() {-->
<!--                return this.cartItems.reduce((total, item) => {-->
<!--                    // 仅计算选中的商品-->
<!--                    if (item.selected) {-->
<!--                        return total + (item.bookPrice * item.carCount);-->
<!--                    }-->
<!--                    return total;-->
<!--                }, 0);-->
<!--            },-->

<!--            // 获取选中的商品-->
<!--            selectedItems() {-->
<!--                return this.cartItems.filter(item => item.selected);-->
<!--            },-->

<!--            // 获取选中的商品ID-->
<!--            selectedItemIds() {-->
<!--                return this.selectedItems.map(item => item.carId);-->
<!--            }-->
<!--        },-->
<!--        mounted() {-->
<!--            this.fetchCartItems();-->
<!--            this.fetchBooks();-->
<!--            this.getCurUser();-->
<!--        },-->
<!--        created() {-->
<!--            // 登录检查-->
<!--            const userInfo = sessionStorage.getItem('curUser');-->
<!--            if (!userInfo) {-->
<!--                alert('请先登录！');-->
<!--                window.location.href = '/AiLogin.html';-->
<!--            }-->
<!--        },-->
<!--        methods: {-->
<!--            /**-->
<!--             * 用户退出-->
<!--             */-->
<!--            exit(){-->
<!--                axios-->
<!--                    .delete('/user/exit')-->
<!--                    .then(response => {-->
<!--                        let result = response.data;-->
<!--                        if(result.success){-->
<!--                            //清除sessionStorage中存储的用户信息-->
<!--                            window.sessionStorage.removeItem("curUser");-->
<!--                            //设置curUser属性的值为null-->
<!--                            this.curUser = null;-->
<!--                            this.$message.success({-->
<!--                                message:result.message,-->
<!--                                duration:1500-->
<!--                            });-->
<!--                            window.location.href="/AiLogin.html"-->
<!--                        }-->
<!--                    })-->
<!--                    .catch(err => {-->
<!--                        console.log(err);-->
<!--                    });-->
<!--            },-->
<!--            //获得当前登录的用户信息-->
<!--            getCurUser(){-->
<!--                //从sessionStorage获得当前登录的用户-->
<!--                this.curUser =JSON.parse(window.sessionStorage.getItem("curUser"));-->

<!--            },-->
<!--            fetchCartItems() {-->
<!--                const userId = "93";-->
<!--                axios.get(`http://localhost:8081/car/getCarByUser/${userId}`)-->
<!--                    .then(response => {-->
<!--                        // 初始化选中状态-->
<!--                        this.cartItems = response.data.map(item => {-->
<!--                            return {...item, selected: false};-->
<!--                        });-->
<!--                        this.cartCount = this.cartItems.reduce((count, item) => count + item.carCount, 0);-->

<!--                        // 如果已经获取到图书数据，则更新图书信息-->
<!--                        if (this.books.length > 0) {-->
<!--                            this.updateBookInfo();-->
<!--                        }-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('获取购物车数据失败:', error);-->
<!--                        this.$message.error('获取购物车数据失败');-->
<!--                    });-->
<!--            },-->

<!--            fetchBooks() {-->
<!--                axios.get('http://localhost:8081/books/queryBooks')-->
<!--                    .then(response => {-->
<!--                        this.books = response.data;-->

<!--                        // 如果已经获取到购物车数据，则更新图书信息-->
<!--                        if (this.cartItems.length > 0) {-->
<!--                            this.updateBookInfo();-->
<!--                        }-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('获取图书列表失败:', error);-->
<!--                    });-->
<!--            },-->

<!--            updateBookInfo() {-->
<!--                this.cartItems.forEach(item => {-->
<!--                    const book = this.books.find(b => b.bookId === item.bookId);-->
<!--                    if (book) {-->
<!--                        item.bookName = book.bookName;-->
<!--                        item.bookPrice = book.bookPrice;-->
<!--                        item.bookImage = book.bookImage;-->
<!--                    }-->
<!--                });-->
<!--            },-->

<!--            // 更新商品数量-->
<!--            updateItemQuantity(item) {-->
<!--                if (!item || !item.carId) return;-->

<!--                // 设置当前正在更新的商品ID-->
<!--                this.updatingItemId = item.carId;-->

<!--                // 调用更新数量接口-->
<!--                axios.put(`http://localhost:8081/car/updateCarCount/${item.carId}/${item.carCount}`)-->
<!--                    .then(response => {-->
<!--                        if (response.data.success) {-->
<!--                            this.$message.success('数量更新成功');-->
<!--                            // 更新购物车总数量-->
<!--                            this.cartCount = this.cartItems.reduce(-->
<!--                                (count, cartItem) => count + cartItem.carCount, 0-->
<!--                            );-->
<!--                        } else {-->
<!--                            this.$message.error('更新失败: ' + (response.data.message || '未知错误'));-->
<!--                            // 恢复原始值-->
<!--                            this.fetchCartItems();-->
<!--                        }-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('更新商品数量失败:', error);-->
<!--                        this.$message.error('更新失败: ' + (error.response?.data?.message || '网络错误'));-->
<!--                        // 恢复原始值-->
<!--                        this.fetchCartItems();-->
<!--                    })-->
<!--                    .finally(() => {-->
<!--                        // 无论成功或失败，都重置更新状态-->
<!--                        this.updatingItemId = null;-->
<!--                    });-->
<!--            },-->

<!--            // 删除单个商品-->
<!--            removeCartItem(carId) {-->
<!--                this.$confirm('确定要删除该商品吗?', '提示', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    // 设置当前正在删除的商品ID-->
<!--                    this.removingItemId = carId;-->

<!--                    // 调用后端删除接口-->
<!--                    axios.delete(`http://localhost:8081/car/deleteCar/${carId}`)-->
<!--                        .then(response => {-->
<!--                            if (response.data.success) {-->
<!--                                // 删除成功，从本地购物车中移除该商品-->
<!--                                this.cartItems = this.cartItems.filter(item => item.carId !== carId);-->
<!--                                // 更新购物车数量-->
<!--                                this.cartCount = this.cartItems.reduce(-->
<!--                                    (count, item) => count + item.carCount, 0-->
<!--                                );-->
<!--                                this.$message.success('已从购物车移除');-->
<!--                            } else {-->
<!--                                this.$message.error('删除失败: ' + (response.data.message || '未知错误'));-->
<!--                            }-->
<!--                        })-->
<!--                        .catch(error => {-->
<!--                            console.error('删除购物车商品失败:', error);-->
<!--                            this.$message.error('删除失败: ' + (error.response?.data?.message || '网络错误'));-->
<!--                        })-->
<!--                        .finally(() => {-->
<!--                            // 无论成功或失败，都重置删除状态-->
<!--                            this.removingItemId = null;-->
<!--                        });-->
<!--                }).catch(() => {-->
<!--                    this.$message.info('已取消操作');-->
<!--                });-->
<!--            },-->

<!--            // 批量删除-->
<!--            batchDelete() {-->
<!--                if (this.selectedItems.length === 0) {-->
<!--                    this.$message.warning('请选择要删除的商品');-->
<!--                    return;-->
<!--                }-->

<!--                this.$confirm(`确定要删除选中的 ${this.selectedItems.length} 件商品吗?`, '批量删除', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    // 设置批量删除状态-->
<!--                    this.isBatchDeleting = true;-->

<!--                    // 获取选中的商品ID-->
<!--                    const carIds = this.selectedItems.map(item => item.carId).join(',');-->

<!--                    // 调用批量删除接口-->
<!--                    axios.delete(`http://localhost:8081/car/delCarBach?carIds=${carIds}`)-->
<!--                        .then(response => {-->
<!--                            if (response.data.success) {-->
<!--                                // 批量删除成功-->
<!--                                this.cartItems = this.cartItems.filter(-->
<!--                                    item => !this.selectedItems.includes(item)-->
<!--                                );-->
<!--                                // 更新购物车数量-->
<!--                                this.cartCount = this.cartItems.reduce(-->
<!--                                    (count, item) => count + item.carCount, 0-->
<!--                                );-->
<!--                                this.$message.success(`成功删除 ${this.selectedItems.length} 件商品`);-->
<!--                                // 重置全选状态-->
<!--                                this.selectAll = false;-->
<!--                            } else {-->
<!--                                this.$message.error('批量删除失败: ' + (response.data.message || '未知错误'));-->
<!--                            }-->
<!--                        })-->
<!--                        .catch(error => {-->
<!--                            console.error('批量删除失败:', error);-->
<!--                            this.$message.error('批量删除失败: ' + (error.response?.data?.message || '网络错误'));-->
<!--                        })-->
<!--                        .finally(() => {-->
<!--                            // 重置批量删除状态-->
<!--                            this.isBatchDeleting = false;-->
<!--                        });-->
<!--                }).catch(() => {-->
<!--                    this.$message.info('已取消批量删除');-->
<!--                });-->
<!--            },-->

<!--            // 全选/取消全选-->
<!--            toggleSelectAll(checked) {-->
<!--                this.cartItems.forEach(item => {-->
<!--                    item.selected = checked;-->
<!--                });-->
<!--            },-->

<!--            // 更新全选状态-->
<!--            updateSelectAll() {-->
<!--                this.selectAll = this.cartItems.length > 0 &&-->
<!--                    this.cartItems.every(item => item.selected);-->
<!--            },-->

<!--            checkout() {-->
<!--                if (this.selectedItems.length === 0) {-->
<!--                    this.$message.warning('请选择要结算的商品');-->
<!--                    return;-->
<!--                }-->

<!--                this.$confirm(`确定要结算 ${this.selectedItems.length} 件商品吗? 总金额: ¥${this.totalCartPrice.toFixed(2)}`, '确认结算', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'success'-->
<!--                }).then(() => {-->
<!--                    this.$message.success('结算成功，订单已生成');-->
<!--                    // 从购物车中移除已结算的商品-->
<!--                    this.cartItems = this.cartItems.filter(-->
<!--                        item => !this.selectedItems.includes(item)-->
<!--                    );-->
<!--                    // 更新购物车数量-->
<!--                    this.cartCount = this.cartItems.reduce(-->
<!--                        (count, item) => count + item.carCount, 0-->
<!--                    );-->
<!--                    // 重置全选状态-->
<!--                    this.selectAll = false;-->
<!--                }).catch(() => {-->
<!--                    this.$message.info('已取消结算');-->
<!--                });-->
<!--            },-->

<!--            goToList() {-->
<!--                window.location.href = 'bookList.html';-->
<!--            },-->

<!--            getBookImage(imageName) {-->
<!--                return imageName ? `images/books/${imageName}` : 'https://via.placeholder.com/200x280?text=No+Image';-->
<!--            },-->

<!--            formatDate(dateString) {-->
<!--                if (!dateString) return '';-->
<!--                const date = new Date(dateString);-->
<!--                return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;-->
<!--            }-->
<!--        }-->
<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->